<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 侧导航菜单</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  .wrap{
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 100%;
    background: #f0f0f0;
  }
  .box{
    display: flex; 
    display: -webkit-flex; /* Safari */
    width: 100%; 
    height: 100%;
    /*flex-direction:column;*/
  }
  .borderOne{border: 1px solid #ccc;}
  .leftBox{width: 300px; height: 100%; display: flex; display: -webkit-flex; /* Safari */
    flex-direction:column;
  }
  .leftBox .topBox{height: 60px;}
  .leftBox .botBox{flex-grow:1;}
  .content{flex:1; padding: 50px;}
  </style>
</head>

<body>
<div class="wrap">
  <div class="box">
    <div class="leftBox">
      <div class="topBox borderOne">左侧上 - 高度300</div>
      <div class="botBox borderOne">左侧下 - 高度自适应</div>
    </div>
    <div class="content borderOne">内容区域 - 宽度高度自适应</div>
  </div>
</div>

</body>

</html>
